/*
  1.React中默认，从上向下，依次匹配，从头匹配到尾
  2. Route组件匹配任意路径的两种方式
  2.1  path写一个/ , 原理是模糊匹配
      2.2  表示匹配任意路径，类似vue中的通配符，不写path，设置 exact 无效
      2.3  如果真的要需要匹配 /,那么使用path='/' exact
*/

import React from 'react';
import ReactDom from 'react-dom/client';
// import 引进时改名使用as,那么以后要切换路由模式，只需要把引进的 属性 改名即可
import { HashRouter as Router, Route, Link } from 'react-router-dom';

class Handler extends React.Component {
  render() {
    return (
      <div>
        {/* HashRouter负责路由实例化 */}
        <Router>
          {/* Link组件，to属性代表要跳转的路径 */}
          <Link to="/">首页</Link>
          <br />
          <Link to="/my">我的音乐</Link>
          <br />
          <Link to="/friend">发现</Link>

          {/* path='/' 模糊匹配-所有页面都可以看到 */}
          <Route path="/" component={Home}></Route>
          {/* 不写path , 匹配所有页面*/}
          <Route component={My}></Route>
          {/* 如果真的需要匹配/，那么使用path='/' exact--精准匹配 */}
          <Route path="/" component={Friend} exact></Route>

          {/* Route组件，类似Vue中的对象规则和挂载点 */}
          {/* path 组件路径 component组件名 */}
          {/* <Route path="/Home" component={Home}></Route>
          <Route path="/My" component={My}></Route>
          <Route path="/Friend" component={Friend}></Route> */}
        </Router>
      </div>
    );
  }
}

function Home() {
  return (
    <div>
      <h1>我是Home组件</h1>
    </div>
  );
}
function My() {
  return (
    <div>
      <h1>我是My组件</h1>
    </div>
  );
}
function Friend() {
  return (
    <div>
      <h1>我是Friend组件</h1>
    </div>
  );
}

// 18版本以上新出的挂载方法
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(<Handler></Handler>);
